<div style="height: 300px">
    <div class="col-md-4" style="height: 100%;border: 1px solid #d8d8d8">
        <div id="chart_patent_type" style="width: 100%;height:100%;">加载中....</div>
    </div>
    <div class="col-md-4" style="height: 100%;border: 1px solid #d8d8d8" >
        <div id="chart_legal_status" style="width: 100%;height:100%;">加载中....</div>
    </div>
    <div class="col-md-4" style="height: 100%;border: 1px solid #d8d8d8;overflow-x: scroll">
        <div id="chart_patent_year" style="width: 100%;height:100%;">加载中....</div>
    </div>
</div>

<script>
    $(function () {
        var chart_patent_type = echarts.init(document.getElementById('chart_patent_type'),null,{renderer: 'canvas'});
        var chart_legal_status = echarts.init(document.getElementById('chart_legal_status'),null,{renderer: 'canvas'});
        var chart_patent_year = echarts.init(document.getElementById('chart_patent_year'),null,{renderer: 'canvas'});
        chart_patent_type.setOption({
            title: {
                text: "专利类型统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'],
                    data: [
                        @foreach($types as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                    ]
                }
            ]
        });
        chart_legal_status.setOption({
            title: {
                text: "专利状态统计",
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [
                {
                    type: 'pie',
                    radius: '55%',
                    color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'],
                    data: [
                         @foreach($cases as $k=>$v)
                        {value: '{{$v}}', name: '{{$k}}'},
                        @endforeach
                    ]
                }
            ]
        });
        chart_patent_year.setOption({
            title: {
                text: '专利年申请统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: []
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //保存为图片
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    @foreach($dates as $k =>$v)
                        '{{$k}}',
                    @endforeach
                ],
                axisLabel:{
                    rotate:45,//度角倾斜显示
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '',
                    type: 'line',
                    stack: '总量',
                    data: [
                        @foreach($dates as $k =>$v)
                            '{{$v}}',
                        @endforeach
                    ]
                }
            ]
        });

    });
</script>